<template>
  <div>
    <div class="change-title">贵司选择的申请融资产品{{infoDetails.estimate.meetNum}}个:</div>
    <div class="change-div">
      <div
        @click="infoDetails.estimate.shortTermProducts && infoDetails.estimate.shortTermProducts.length ? tabIndex = 0 : null"
        :class="{'active-class' : tabIndex == 0}"
      >
        短期({{infoDetails.estimate.shortTermProducts ? infoDetails.estimate.shortTermProducts.length : 0}})
        <span
          v-if="tabIndex == 0"
        ></span>
      </div>
      <div
        @click="infoDetails.estimate.middleTermProducts && infoDetails.estimate.middleTermProducts.length ? tabIndex = 1 : null"
        :class="{'active-class' : tabIndex == 1}"
      >
        中期({{infoDetails.estimate.middleTermProducts ? infoDetails.estimate.middleTermProducts.length : 0}})
        <span
          v-if="tabIndex == 1"
        ></span>
      </div>
      <div
        @click="infoDetails.estimate.longTermProducts && infoDetails.estimate.longTermProducts.length ? tabIndex = 2 : null"
        :class="{'active-class' : tabIndex == 2}"
      >
        长期({{infoDetails.estimate.longTermProducts ? infoDetails.estimate.longTermProducts.length : 0}})
        <span
          v-if="tabIndex == 2"
        ></span>
      </div>
    </div>

    <ul class="list-content">
          <li v-if="tabIndex == 2 && infoDetails.estimate.longTermProducts && infoDetails.estimate.longTermProducts.length">
            <Swipe class="my-swipe" :loop="false" :show-indicators="false">
              <SwipeItem v-for="(item, index) in infoDetails.estimate.longTermProducts" :key="index">
                <div class="list">
                  <h2>
                    <span>{{item.productName}}</span>
                    <span>{{item.type == 3 ? "长期" : item.type == 2 ? "中期" : "短期"}}</span>
                  </h2>
                  <div>{{item.productDescribe}}</div>
                  <div>申请额度：{{item.approvalAmountMin}}-{{item.approvalAmountMax}}万</div>
                  <div>贷款利息：年华{{item.loanInterestMin}}%-{{item.loanInterestMax}}%</div>
                  <div class="dkjg">
                    <span>贷款机构：{{item.lendingProviderName}}</span>
                    <span>
                      <span
                        style="font-size:18px; color:#2F54EB; font-weight:bold"
                      >{{item.loanPeriodMax}}</span>
                      <span>期</span>
                    </span>
                  </div>
                </div>
                <Steps direction="vertical" :active="-1" inactive-color="#2F54EB">
                  <Step>
                    <div>可申请产品数：{{item.singleProductMeetNum}}个</div>
                  </Step>
                  <Step>
                    <div>可申请总额度：{{item.approvalAmountMax}}万</div>
                  </Step>
                  <Step>
                    <div>还款方式：{{item.repaymentMethodStr}}</div>
                  </Step>
                  <Step>
                    <div>申请方式：{{item.applicationMethodStr}}</div>
                  </Step>
                  <Step>
                    <div>担保方式：{{item.guaranteeMethodStr}}</div>
                  </Step>
                </Steps>
              </SwipeItem>
            </Swipe>
          </li>

          <li
            v-if="tabIndex == 1 && infoDetails.estimate.middleTermProducts && infoDetails.estimate.middleTermProducts.length"
          >
            <Swipe class="my-swipe" :loop="false" :show-indicators="false">
              <SwipeItem v-for="(item, index) in infoDetails.estimate.middleTermProducts" :key="index">
                <div class="list">
                  <h2>
                    <span>{{item.productName}}</span>
                    <span>{{item.type == 3 ? "长期" : item.type == 2 ? "中期" : "短期"}}</span>
                  </h2>
                  <div>{{item.productDescribe}}</div>
                  <div>申请额度：{{item.approvalAmountMin}}-{{item.approvalAmountMax}}万</div>
                  <div>贷款利息：年华{{item.loanInterestMin}}%-{{item.loanInterestMax}}%</div>
                  <div class="dkjg">
                    <span>贷款机构：{{item.lendingProviderName}}</span>
                    <span>
                      <span
                        style="font-size:18px; color:#2F54EB; font-weight:bold"
                      >{{item.loanPeriodMax}}</span>
                      <span>期</span>
                    </span>
                  </div>
                </div>
                <Steps direction="vertical" :active="-1" inactive-color="#2F54EB">
                  <Step>
                    <div>可申请产品数：{{item.singleProductMeetNum}}个</div>
                  </Step>
                  <Step>
                    <div>可申请总额度：{{item.approvalAmountMax}}万</div>
                  </Step>
                  <Step>
                    <div>还款方式：{{item.repaymentMethodStr}}</div>
                  </Step>
                  <Step>
                    <div>申请方式：{{item.applicationMethodStr}}</div>
                  </Step>
                  <Step>
                    <div>担保方式：{{item.guaranteeMethodStr}}</div>
                  </Step>
                </Steps>
              </SwipeItem>
            </Swipe>
          </li>

          <li v-if="tabIndex == 0 && infoDetails.estimate.shortTermProducts && infoDetails.estimate.shortTermProducts.length">
            <Swipe class="my-swipe" :loop="false"  :show-indicators="false">
              <SwipeItem v-for="(item, index) in infoDetails.estimate.shortTermProducts" :key="index">
                <div class="list">
                  <h2>
                    <span>{{item.productName}}</span>
                    <span>{{item.type == 3 ? "长期" : item.type == 2 ? "中期" : "短期"}}</span>
                  </h2>
                  <div>{{item.productDescribe}}</div>
                  <div>申请额度：{{item.approvalAmountMin}}-{{item.approvalAmountMax}}万</div>
                  <div>贷款利息：年华{{item.loanInterestMin}}%-{{item.loanInterestMax}}%</div>
                  <div class="dkjg">
                    <span>贷款机构：{{item.lendingProviderName}}</span>
                    <span>
                      <span
                        style="font-size:18px; color:#2F54EB; font-weight:bold"
                      >{{item.loanPeriodMax}}</span>
                      <span>期</span>
                    </span>
                  </div>
                </div>
                <Steps direction="vertical" :active="-1" inactive-color="#2F54EB">
                  <Step>
                    <div>可申请产品数：{{item.singleProductMeetNum}}个</div>
                  </Step>
                  <Step>
                    <div>可申请总额度：{{item.approvalAmountMax}}万</div>
                  </Step>
                  <Step>
                    <div>还款方式：{{item.repaymentMethodStr}}</div>
                  </Step>
                  <Step>
                    <div>申请方式：{{item.applicationMethodStr}}</div>
                  </Step>
                  <Step>
                    <div>担保方式：{{item.guaranteeMethodStr}}</div>
                  </Step>
                </Steps>
              </SwipeItem>
            </Swipe>
          </li>
        </ul>
      </div>



    <!-- <swiper ref="mySwiper1" :options="swiperOption">
      <div class="swiper-slide">
        <div class="swiper-box">
          <div class="top-div">
            <div>商品信用贷</div>
            <div>短期</div>
          </div>
          <div class="mt10">注重企业实际经营状况</div>
          <div class="mt15">申请额度：10-100万（单个产品）</div>
          <div class="mt10">贷款利息：年华7%-9%</div>
          <div class="bottom-div mt10">
            <div>贷款机构：银行与非银行机构</div>
            <div>
              <span>12</span>期
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div>
          <div>商品信用贷</div>
          <div>短期</div>
        </div>
        <div>注重企业实际经营状况</div>
        <div>申请额度：10-100万（单个产品）</div>
      </div>
    </swiper> -->

    <!-- <Steps direction="vertical" class="tabstep-info" active-icon :active="5" active-color="#2F54EB">
      <Step>
        <p>可申请产品数：2个</p>
      </Step>
      <Step>
        <p>可申请总额度：200万</p>
      </Step>
      <Step>
        <p>还款方式：等额本息、先息后本</p>
      </Step>
      <Step>
        <p>申请方式：线下申请，线下审批</p>
      </Step>
      <Step>
        <p>担保方式：需要担保人，资质好可免担保</p>
      </Step>
    </Steps>-->
    <!-- <div class="box describe">
      <div class="li">
        <p>可申请产品数：2个</p>
      </div>
      <div class="li">
        <p>可申请总额度：200万</p>
      </div>
      <div class="li">
        <p>还款方式：等额本息、先息后本</p>
      </div>
      <div class="li">
        <p>申请方式：线下申请，线下审批</p>
      </div>
      <div class="li">
        <p>担保方式：需要担保人，资质好可免担保</p>
      </div>
    </div> -->
    <!-- <div class="mt10">
      <div class="money-box">
        <div class="top-div">
          <div>服务费用</div>
          <div>服务费率1%</div>
        </div>
        <div class="mt15">保证金：1万元</div>
        <div class="mt10">金融服务费：2万元</div>
      </div>
    </div> -->
  </div>
</template>

<script>
import Vue from "vue";
// import VueAwesomeSwiper from "vue-awesome-swiper";
// import "swiper/dist/css/swiper.css";
// import { swiper, swiperSlide } from "vue-awesome-swiper";
// Vue.use(VueAwesomeSwiper);
import { Step, Steps, Swipe, SwipeItem } from "vant";
export default {
  props: {
    infoDetails: {
      required: true,
      type: Object,
    },
  },
  components: {
    Step,
    Steps,
    Swipe, 
    SwipeItem
  },
  data() {
    return {
      tabIndex: 0,
      swiperWidth: window.innerWidth - 70
    };
  },
  mounted() {
    if (
      this.infoDetails.estimate.longTermProducts &&
      this.infoDetails.estimate.longTermProducts.length
    )
      this.tabIndex = 2;
    if (
      this.infoDetails.estimate.middleTermProducts &&
      this.infoDetails.estimate.middleTermProducts.length
    )
      this.tabIndex = 1;
    if (
      this.infoDetails.estimate.shortTermProducts &&
      this.infoDetails.estimate.shortTermProducts.length
    )
      this.tabIndex = 0;
  },
};
</script>

<style lang="stylus" scoped>
@import './../../../assets/styl/mixin.styl'
.mt10
  margin-top rem(10)
.change-title
  color $fontColor
  font-size rem(13)
.change-div
  margin-top rem($m15)
  display flex
  justify-content space-around
  text-align center
  font-size rem($ft16)
  color #999999
  div
    width rem(94)
    height rem(16)
  .active-class
    color $baseColor
    text-align center
    :after
      display block
      content url('./../../../assets/image/active-class.png')
// .swiper-container
//   margin-left auto
//   margin-right auto
//   position relative
//   overflow auto
//   list-style none
//   padding 0
//   z-index 1
// .swiper-slide
//   // background red
//   margin-top rem(27)
//   height rem(144)
//   width rem(307)
//   box-shadow rem(0) rem(2) rem(12) rem(0) rgba(0, 0, 0, 0.1)
//   border-radius rem(4)
//   border-left rem(4) solid $baseColor
//   .swiper-box
//     display flex
//     flex-direction column
//     font-size rem(13)
//     padding rem(15)
//     .top-div
//       display flex
//       justify-content space-between
//       font-size rem(15)
//       font-weight bold
//     .mt10
//       margin-top rem(10)
//     .mt15
//       margin-top rem(15)
//     .bottom-div
//       display flex
//       justify-content space-between
//       font-size rem(15)
//   .swiper-pagination-bullet
//     background-color #FFFFFF
//     width 16px
//     height 2px
//     border-radius 3px
//     bottom -10px
//     opacity 0.5
//   .swiper-pagination-bullet-active
//     background-color $baseColor
//     width 16px
//     height 2px
//     border-radius 3px
//     opacity 1
.list-content
  margin-top rem(10)
  padding-bottom rem(20)
  li
    background-color #fff
    border-top 0
    .list
      height rem(144)
      border-radius rem(6)
      border-left rem(4) solid #2F54EB
      box-shadow rem(0) rem(0) rem(5) rgba(0, 0, 0, 0.2)
      padding rem(10) rem(15)
      box-sizing border-box
      margin rem(10)
      line-height rem(24)
      h2, .dkjg
        display flex
        justify-content space-between
[class*=van-hairline]::after
  border 0
>>> .van-step__title
  color #333 !important
>>> .van-step--vertical
  padding rem(5) rem(5) rem(5) 0
.lines
  display flex
  align-items center
.tabstep-info
  margin-top rem($m30)
  .van-step--vertical:not(:last-child)::after
    border-bottom none !important
  .van-step__title--active
    color $titleColor !important
  .van-step--vertical
    font-size rem($ft15)
    color $titleColor
.describe .li
  font-size rem(15)
  font-weight 400
  color #333333
  line-height rem(35)
  position relative
  padding-left rem(20)
  position relative
  display flex
  align-items center
  ::before
    content ''
    width rem(5)
    height rem(5)
    border-radius 50%
    position absolute
    left 0
    top rem(15)
    display inline-block
    background #2F54EB
  ::after
    position absolute
    content ''
    border-left rem(1) dashed #2F54EB
    left rem(2)
    top rem(15)
    height 100% /* calc(100% - 10px) */
.money-box
  display flex
  font-size rem(15)
  flex-direction column
  color #333
  padding rem(20) rem(15)
  .top-div
    display flex
    justify-content space-between
    color #999
    :first-child
      color #333
      font-weight bold
  .mt10
    margin-top rem(10)
  .mt15
    margin-top rem(15)
</style>
<style scoped>
</style>